<template>
	<view>
	<!-- 	<uni-nav-bar statusBar="true" :fixed="true" :border="false" backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				{{i18n.index}}
				<view class="left" @tap.stop="back">
					<uni-icon type="back" color="#ffffff" size="30"></uni-icon>
				</view>
				<view class="content">
					{{i18n.yu_e_bao}}
				</view>
				<view>
				</view>
			</view>
		</uni-nav-bar> -->
		
		<view class="top-title">
			<!-- <image src="../../static/imgs/balance_bg.png" mode="widthFix" lazy-load></image> -->
			<view class="top-title-tit">
				<!-- {{i18n.yu_e_bao}} -->
				DCH
			</view>
			<view class="top-title-content">
				<view class="top-title-item">
					<!-- <span>{{info.title_en || '-'}} {{i18n.number_}}</span> -->
					<view class="">{{info.financial || 0}}</view>
				</view>
				<!-- <view class="top-title-item">
					<span>{{info1.title_en || '-'}} {{i18n.number_}}</span>
					<view class="">{{info1.financial || '-'}}</view>
				</view> -->
			</view>
			
		</view>
		<view class="history">
			<!-- <view class="history-title"> -->
				<!-- {{i18n.yu_e_bao}}{{i18n.TransactionRecord}} -->
			<!-- </view> -->
			<view class="history-nav">
				<!-- <view :class="{'act':indexs==0}" @tap.stop="selectIndex('0')">{{i18n.trans_into_record}}</view> -->
				<view :class="{'act':indexs==0}" @tap.stop="selectIndex('0')">{{i18n.Transfer_to_the_mining_pool}}</view>
				<!-- <view :class="{'act':indexs==1}" @tap.stop="selectIndex('1')">{{i18n.trans_out_record}}</view> -->
			</view>
			<view class="history-list">
				<template v-if="list.length>0">
					<block v-for="(item,index) in list" :key="index">
						<view class="list">
							<view class="item-left">
								<view class="">
									{{item.typeStr}} 
								</view>
								<text>{{item.time}}</text>
							</view>
							<view class="item-right active" >
								<view class="item-right-text">
									{{item.num}}
								</view>
								<view class="item-right-icon">
									<uni-icon
									type="checkbox-filled" 
									color="#007AFF" 
									size="16"></uni-icon> {{i18n.exchange_success}}
								</view>
								
							</view>
						</view>
					</block>
				</template>
				<template v-else>
					<view class="nodata">{{i18n.nodata}}</view>
				</template>
			</view>
		</view>
		
		<view class="fixed-btn">
			<view class="fixed-btn-content">
			<!-- 	<view class="fixed-btn-item" @tap.stop="jumpCollection">
					{{i18n.TransferOut}}
				</view> -->
				<view class="fixed-btn-item" @tap.stop="jumpTranslate">
					{{i18n.TransferInto}}
				</view>
			</view>
			
		</view>

		
		
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import {mapGetters} from 'vuex';
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getLangType',
				'getLang'
			])
		},
		components:{
			uniNavBar,uniIcon
		},
		data() {
			return {
				indexs:0,
				info:{},
				info1:{},
				curList:[],
				type:4,    // 4转入记录  5转出记录
				page:1,
				list:[]
			}
		},
		onReachBottom(){
			//触底加载更多
			this.getHistory() 
		},
		onPullDownRefresh(){
			//上拉刷新
			this.page = 1;
			this.list = [];
			this.getHistory()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:this.getLang==1?'矿池':'Mining pool'
			})
			
			this.indexs = 0;
			this.type = 4;
			this.page =1;
			this.list = []
			this.getWall();
			this.getHistory();
		},
		methods:{
			selectIndex(e){
				this.indexs = e;
				this.type = e==1?5:4;
				this.page =1;
				this.list = []
				this.getHistory();
			},
			checkToken(e){
				let index = e.detail.value;
				this.info = this.curList[index];
				this.getWall();
			},
			getHistory(){
				let url = this.getRequestUrl + "/api/User/detailed";
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					type:this.type,
					page:this.page,
					rows:10
				}
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					this.showLoad = false;
					if(res.data.data.data.length==0){
						return
					}
					if(res.data.code){
						if(this.page==1){
							this.list = res.data.data.data.data
							this.page++
						}else{
							this.list = this.list.concat(res.data.data.data.data)
							this.page++
						}
					}
				}).catch(error=>{
					
				})
			},
			getWall(){
				this.showLoad = true;
				let url = this.getRequestUrl + "/api/wallet/wallet_list";
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					pay_key:this.getLoginInfo.pay_key
				}
				fetch(url,data,"POST").then(res=>{
					showToast(res.data.msg)
					this.showLoad = false;
					if(res.data.code){
						this.curList = res.data.data.list;
						this.curList.forEach((item,index)=>{
							this.curList[index].type = (item.zdf>=0?true:false)
							this.curList[index].zdfisshow = false;
							item.financial = (parseInt(item.financial*10000)/10000).toFixed(4)
							item.zdf = (item.zdf*100)+'%'
							
							if(item.title_en=='DCH'){
								this.info = item
							}
						})
						// if(!this.info.title_en){
						// 	this.info = this.curList[0]
						// 	this.info1 = this.curList[1]
						// }else{
						// 	console.log(this.curList);
						// 	this.info = this.curList[0]
						// 	this.info1 = this.curList[1]
						// 	// let lis = this.curList.filter(item=>{
						// 	// 	return item.token_id == this.info.token_id
						// 	// })
						// 	// this.info = lis[0]
						// }
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			jumpTranslate(){

				// let list = this.curList.filter(item=>item.title_en=='DCTOKEN')
				uni.navigateTo({
					url:`/pages/balance/translate?item=${JSON.stringify(this.curList)}`
				})
			},
			jumpCollection(){
				let list = this.curList.filter(item=>item.title_en=='DCTOKEN')
				uni.navigateTo({
					url:`/pages/balance/collection?item=${JSON.stringify(list)}`
				})
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.fixed-btn{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		.fixed-btn-content{
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			// &::after{
			// 	content: '';
			// 	position: absolute;
			// 	left: 50%;
			// 	top: 0;
			// 	height: 100upx;
			// 	width: 2upx;
			// 	background-color: #FFFFFF;
			// }
			.fixed-btn-item{
				flex: 1;
				font-size: 36upx;
				color: #FFFFFF;
				text-align: center;
				line-height: 100upx;
				height:100upx;
				&:first-of-type{
					background-color: #36476f;
				}
				&:last-of-type{
					background-color: #36476f;
				}
			}
		}
		
	}
	.index-top-nav-title{
		// padding-left: 30upx;
		background-color: #36476f;
		width: 100%;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.content{
			font-size: 37upx;
			text-align: center;
		}
	}
	.top-title{
		position: relative;
		background-position: left top;
		padding: 48upx 0 80upx; 
		background-color: #36476f;
		.top-title-tit{
			font-size: 40upx;
			color: #FFFFFF;
			text-align: center;
		}
		.top-title-content{ 
			// z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
			.top-title-item{
				flex: 1;
				text-align: center;
				span{
					font-size: 30upx;
					color: #B0C9FF;
					// display: block;
					font-weight: lighter;
				}
				view{
					color: #FFFFFF;
					font-size: 44upx;
					font-weight: bold;
					padding-top: 34upx;
				}
			}
		}
		
	}
	.balance-content{
		margin: 20upx 30upx;
		background-color: #FFFFFF;
		border-radius: 15upx;
		padding: 43upx 0 44upx;
		
		.balance-content-title{
			text-align: center;
			.title{
				padding: 0 30upx 32upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1upx solid #d5d5d5;
				.item{
					display: flex;
					align-items: center;
					justify-content:flex-start;
					image{
						width: 80upx;
						height: 80upx;
						margin-right: 20upx;
					}
				}
				text{
					margin-top:0;
					padding:0;
					background-color: #FFFFFF;
				}
			}
			.total{
				font-size: 35upx;
				font-weight: bold;
				color: #000000;
				margin: 43upx 0 29upx;
			}
			text{
				margin-top: 26upx;
				font-size: 22upx;
				padding: 26upx 40upx;
				border-radius:50upx;
				color: #5c5c5c;
				background-color: #EDEDED;
			}
		}
		.balance-content-cont{
			margin: 100upx 0 90upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			&::before{
				width: 1upx;
				height: 90upx;
				background:rgba(0,0,0,.2) ;
				position: absolute;
				content: '';
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				z-index: 2;
			}
			.item{
				flex: 1;
				text-align: center;
				text{
					font-size: 24upx;
					color: #797979;
				}
				view{
					margin-top: 31upx;
					font-size: 28upx;
					font-weight: bold;
					color: #000000;
				}
			}
		}
		.balance-content-bottom{
			display: flex;
			align-items: center;
			justify-content: center;
			view{
				width: 270upx;
				height:80upx;
				line-height: 80upx;
				text-align: center;
				border-radius:10upx;
				font-size:26upx;
				&:first-of-type{
					background-color: #D7E4EF;
					color: #36476f;
					margin-right: 50upx;
				}
				&:last-of-type{
					background-color: #36476f;
					color: #FFFFFF;
				}
			}
		}
	}
	.history{
		.history-nav{
			background-color: #f3f4fb;
			display: flex;
			// justify-content: center;
			align-items: center;
			padding-bottom: 20upx;
			view{
				padding: 40upx 0 0 30upx;
				font-size: 32upx;
				font-weight: bold;
				color: #7A8DAE;
				&.act{
					color: #36476f;
					font-size: 38upx;
					// position: relative;
					// &::after{
					// 	width: 80upx;
					// 	height: 4upx;
					// 	content: "";
					// 	background-color: #1d7dff;
					// 	position: absolute;
					// 	left: 50%;
					// 	bottom: 0;
					// 	transform: translateX(-50%);
					// }
				}
				// &:first-of-type{
				// 	margin-right: 80upx;
				// }
			}
		}
		.history-list{
			background-color: #FFFFFF;
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;
			padding:0 20upx 100upx;
			.nodata{
				text-align: center;
				color: #7A8DAE;
				font-weight: bold;
				padding-top: 100upx;
			}
			.list{
				display: flex;
				justify-content: space-between;
				padding:32upx 0;
				border-bottom: 2upx solid #D1D1D1;
				&:last-child{
					border-bottom:none;
				}
				.item-left{
					view{
						color: #2D2D2D;
						font-weight: bold;
						font-size:30upx; 
						padding-bottom:28upx ;
					}
					text{
						
						color: #6D6D6D;
						font-size: 20upx;
					}
				}
				.item-right{
					.item-right-text{
						font-size: 36upx;
						font-weight: bold;
						color: #FE4633;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.item-right-icon{
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 22upx;
						padding-top: 24upx;
						color: #282828;
					}
					
					&.active{
						color: #36476f;
					}
				}
			}
		}
	}
</style>
